var storejson = new Array();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var maxsize = 100 * 1024;
$(function () {
    $.ajax({
        url: "./goSHGL/initPage", //请求的url地址
        xhrFields: {
            withCredentials: true
        },
        dataType: "json", //返回格式为json
        type: "GET", //请求方式
        processData: false, //对表单data数据是否进行序列化
        contentType: false, //dataType设置你收到服务器数据的格式
        headers: {
            'Content-Type': 'application/json'
        },
        beforeSend: function() {
            //请求前的处理
        },
        success: function(data) {
            if(data.status==0){
                // top.location.href = "../../login.html";
                window.location.href="./login.html";
            }else{
                var json = JSON.parse(data.data)
                var tempstorejson = json.data;
                var temp = {
                    value: "",
                    label: "全部"
                };
                storejson.push(temp)
                if(data.store=='总部'){
                    for(var i=0;i<tempstorejson.length;i++){
                        var temp = {
                            value: tempstorejson[i].Post,
                            label: tempstorejson[i].Post
                        };
                        storejson.push(temp)
                    }
                }else{
                    var temp = {
                        value: data.store,
                        label: data.store
                    };
                    storejson.push(temp)
                }
            }
        },
        complete: function() {
            //请求完成的处理
        },
        error: function() {}
    });
})

var pageSize = 99999999;
var vm = new Vue({
    el: "#app",
    data:function(){
        return{
            //图片展示
            imageList:[],
            //图片展示end
            //上传
            src:'',
            upsrc:'',
            file:[],
            format:[],
            uploadFile:[],
            loadingStatus:"",
            SHID:"",
            InfoImage:"",
            //上传end
            FName: "",
            Province:"",
            Factory:"",
            FactoryList:[],
            Product:"",
            ProductList:[],
            // 初始化信息总条数
            stripe:true
        }
    },

    methods: {
        ok () {
        },
        cancel () {
        },
        changeFactory(){
            this.FactoryList = [];
            this.Factory = "";
            this.ProductList = [];
            this.Product = "";
            var self = this;
            var FName = this.FName;
            var Province = this.Province;
            var jsondata={"FName": FName, "Province":Province};
            var data_json = JSON.stringify(jsondata);
            $.ajax({
                url: "./goImage/changeFactory", //请求的url地址
                dataType: "json", //返回格式为json
                async:true,
                data: data_json, //参数值
                type: "POST", //请求方式
                processData: false, //对表单data数据是否进行序列化
                contentType: false, //dataType设置你收到服务器数据的格式
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(data) {
                    var tempstorejson = data.data;
                    for (var i = 0; i < tempstorejson.length; i++) {
                        var temp = {
                            value: tempstorejson[i].ID,
                            label: tempstorejson[i].FName
                        };
                        self.FactoryList.push(temp)
                    }
                },
                error: function() {},
            });
        },
        changeProduct(){
            this.ProductList = [];
            this.Product = '';
            var self = this;
            var Factory = this.Factory;
            var jsondata={"FID":Factory};
            var data_json = JSON.stringify(jsondata);
            $.ajax({
                url: "./goImage/changeProduct", //请求的url地址
                dataType: "json", //返回格式为json
                async:true,
                data: data_json, //参数值
                type: "POST", //请求方式
                processData: false, //对表单data数据是否进行序列化
                contentType: false, //dataType设置你收到服务器数据的格式
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(data) {
                    var tempstorejson = data.data;
                    for (var i = 0; i < tempstorejson.length; i++) {
                        var temp = {
                            value: tempstorejson[i].ID,
                            label: tempstorejson[i].PName
                        };
                        self.ProductList.push(temp)
                    }
                },
                error: function() {},
            });
        },
        changeUploadDiv(Product){
            var self =this;
            this.imageList = [];
            this.src = '';
            $("#uploadDiv").attr("style","");
            if(Product==''||Product==null){
                $("#uploadDiv").attr("style","display:none");
                return false;
            }
            var Factory = this.Factory;
            if(Product!=''||Product!=null){
                var jsondata={"FID":Factory,"PID":Product};
                var data_json = JSON.stringify(jsondata);
                $.ajax({
                    url: "./goImage/queryImagesByFIDAndPID", //请求的url地址
                    dataType: "json", //返回格式为json
                    async:true,
                    data: data_json, //参数值
                    type: "POST", //请求方式
                    processData: false, //对表单data数据是否进行序列化
                    contentType: false, //dataType设置你收到服务器数据的格式
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: function(data) {
                        var tempstorejson = data.data;
                        self.imageList = tempstorejson;
                    },
                    error: function() {},
                });
            }

        },
        /*上传查看资料 开始*/
        // 上传授权书前的事件钩子
        handleMaxSize(file){
            toastr.warning("超出文件大小限制,文件 "+ file.name +" 太大，不能超过 3M。");
            return false;
        },
        handleUpload (file) {
            var self = this;
            // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
            if(this.file.length>=1){
                toastr.warning("只允许上传一张图片");
                return false;
            }
            // 保存文件到总展示文件数据里
            this.file.push(file);
            // 保存文件到需要上传的文件数组里
            this.uploadFile.push(file)
            //预览
            var reader = new FileReader();
            reader.readAsDataURL(file);
            setTimeout(() => {
                if (!self.src){
                    self.src=reader.result;
                    self.upsrc=reader.result;
                }
            }, 1000);
            // 返回 falsa 停止自动上传 我们需要手动上传
            return false;
        },
        handleFormatError (file) {
            toastr.warning("文件  "+ file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。");
        },
        delectFile (keyID) { // 删除文件
            // 删除总展示文件里的当前文件
            this.file.splice(0);
            // 删除需要上传文件数据里的当前文件
            this.uploadFile.splice(0);
            this.src=null;
        },

        upload () { // 上传文件
            /*var self = this;
            var item = this.uploadFile[0]
            self.$refs.upload.post(item);*/

            var self = this;
            var image = document.getElementById("ago");
            var item = this.uploadFile[0];
            if(item.size>5*1024*1024){
                toastr.warning("超出文件大小限制,文件 "+ item.name +" 太大，不能超过 5M。");
                return false;
            }
            if(item.size>512000){

                var ndata = self.compress(image);

                var file = self.dataURLtoFile(ndata,"file.jpg")
                self.$refs.upload.post(file);
            }else{
                self.$refs.upload.post(item);
            }
        },
        dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },

        compress(img) {
            var width = img.width;
            var height = img.height;
            var bili = 1;
            if(width>480){
                bili = 480/width;
            }else{
                if(height>640){
                    bili = 640/height;
                }else{
                    bili=1;
                }
            }
            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            var ratio;
            if ((ratio = width * height / 4000000) > 1) {
                ratio = Math.sqrt(ratio);
                width /= ratio;
                height /= ratio;
            } else {
                ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            // 铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            //如果图片像素大于100万则使用瓦片绘制
            var count;
            if ((count = width * height / 1000000) > 1) {
                count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                //计算每块瓦片的宽和高
                var nw = ~~(width / count);
                var nh = ~~(height / count);
                tCanvas.width = nw;
                tCanvas.height = nh;
                for (var i = 0; i < count; i++) {
                    for (var j = 0; j < count; j++) {
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else {
                var m = img.height/img.width;
                canvas.height =800*m;
                canvas.width= 800;
                ctx.drawImage(img, 0, 0, 800, 800*m);
            }
            //进行最小压缩
            var ndata = canvas.toDataURL('image/jpeg', 1);
            // tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            return ndata;
        },
        uploadSuccess(){
            // 删除总展示文件里的当前文件
            this.file.splice(0);
            // 删除需要上传文件数据里的当前文件
            this.uploadFile.splice(0);
            this.src=null;
            var Product = this.Product;
            this.changeUploadDiv(Product);
           toastr.success("上传图片成功")
        },
        /*上传查看资料结束*/
        delectImage(ID,FID,PID,IName){
            var self = this;
            var jsondata={"ID":ID,"FID":FID,"PID":PID,"IName":IName};
            var data_json = JSON.stringify(jsondata);
            $.ajax({
                url: "./goImage/delectImageByID", //请求的url地址
                dataType: "json", //返回格式为json
                async:true,
                data: data_json, //参数值
                type: "POST", //请求方式
                processData: false, //对表单data数据是否进行序列化
                contentType: false, //dataType设置你收到服务器数据的格式
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(data) {
                    if(data.status=='1'){
                        toastr.success("图片删除成功")
                    }else{
                        toastr.warning("图片删除失败，请重新删除")
                    }
                    var Product = self.Product;
                    self.changeUploadDiv(Product);

                },
                error: function() {},
            });
        }
    }
})